* {
    margin: 0;
    padding: 0;
}
body {
    overflow: hidden;
    height: 100%;
}

a {
    text-decoration: none;
}
ul li {
    list-style: none;
    box-sizing: border-box;
}
/* 媒体查询部分 开始 */
@media screen and (min-width:1920px) and (max-width:2560px) {
    html {
        font-size: 256px!important;
    }
}
@media screen and (min-width:1280px) and (max-width:1920px) {
    html {
        font-size: 192px!important;
    }
    .main {
        width: 3rem!important;
    }
    .nav ul li a {
        height: .26rem!important;
        line-height: .26rem!important;
    }
}
@media screen and (min-width:961px) and (max-width:1280px) {
    html {
        font-size: 192px!important;
    }
    .main {
        width: 2.75rem!important;
    }
    .nav ul li a {
        height: .25rem!important;
        line-height: .25rem!important;
    }
}
@media screen and (min-width:415px) and (max-width:960px)  {
    html {
        font-size: 192px!important;
    }
}
@media screen and (min-width:300px) and (max-width:414px)  {
    html {
        font-size: 120px!important;
    }
    #bg {
        background-image: url("../images/320px.jpg")!important;
        background-size: 414px, 736px!important;
    }
    
    .main::after {
    background-image: url("../images/320px.jpg")!important;
    background-size: 414px, 736px!important;
}
}
/* 媒体查询部分 结束 */
/* 背景部分开始 */
#bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    transition:all .8s;
    background-image: url("../images/bg1.png");
    background-position: center;
    background-size: 2560px, 1440px;
    background-repeat: no-repeat;
    z-index: -1;
}

#bg::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,1);
    animation: name 5s .5s forwards;
    transition: 0.8s;
}
/* 背景渐变 */
@keyframes name {
    100% {
        background-color: rgba(0,0,0,.3);
    }
}

/* 背景部分 结束 */

/* 中心内容区域 鼠标移动到中心显示的部分 */
.main {    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: .0001rem;
    height: 4rem;
    border-radius: .078125rem;
    transition: all .3s;
    animation: min 2s forwards ease-in-out;
    padding-top: 10rem;
    z-index: 1;
}
@keyframes min {
    100% {
        width: 2.5rem;
        padding: .078125rem;
    }
}
.main::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: .078125rem;
    background-image: url("../images/bg1.png");
    background-size: 2560px, 1440px;
    background-position: 50% 50%;
    z-index: -2;
}
.main::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: .078125rem;
    background-color: rgba(0,0,0,.3);
    z-index: -1;
}
/* .main:hover {
    box-shadow: 0 0 .078125rem rgba(255, 255, 255, 0.5);
} */

/* .main:hover~#bg {
    filter: blur(10px);
} */



/* 头像部分 开始 ↓ */
.toux {
    overflow: hidden;
    width: .6rem;
    height: .6rem;
    border-radius: .5rem;
    border: 1px solid #fff;
    margin: 0 auto;
}
.toux img {
    width: 100%;
    height: 100%;
}
/* 头像部分 结束 ↑ */

/* 头像下面居中竖线 */
.touxi {
    width: .003906rem;
    height: .266666rem;
    border-left: .003906rem solid #fff;
    margin: 0 auto;
}

/* 句子部分 开始 */
.main .text {
    position: relative;
    width: 100%;
    text-align: center;
    border-top: .003906rem solid #fff;
    border-bottom: .003906rem solid #fff;
    padding: .2rem 0;
}
.text::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
}
.text h1,p {
    line-height: .2rem;
    font-size: .11rem;
    font-family: 'Lato', '幼圆', sans-serif;
    color: #fff;
    text-shadow: 5px 4px 3px rgba(0, 0, 0, .43);
}
.text p {
    font-size: .08rem;
}
/* 句子部分 结束 */

/* 句子部分下面 链接上面的 居中的 竖线 */
.texti {
    width: .003906rem;
    height: .266666rem;
    border-left: 1px solid #fff;
    margin: 0 auto;
}

/* 链接部分 开始 */

.nav ul li {
    float: left;
    width: 25%;
    margin-bottom: .019531rem;
}

.nav ul li a {
    position: relative;
    display: block;
    width: 100%;    
    height: .55rem;
    line-height: .55rem;
    letter-spacing: .007813rem;
    text-align: center;
    /* text-transform:uppercase; */
    font-size: .2rem;
	font-family: '幼圆', sans-serif;
    color: #fff;
    font-weight: lighter;
    border-radius: .023438rem;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    transition: .5s;

}
.nav ul li a img {
    width: .070313rem;
    height: .070313rem;
    transition: all .3s linear;
}
/* 鼠标移动到图片上 图片旋转360° */
.nav ul li a:hover img {
    transform: rotateZ(360deg); 
}
.nav ul li:nth-child(2) {
    width: calc(25% - .003906rem);
}
.nav ul li:nth-child(4) a {
    border-right: 1px solid #fff;
}
.nav ul li a:hover::after {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: .023438rem;
    animation: hover 1s forwards;
}
.nav ul li a img {
    width: .26rem;
    height: .26rem;
    vertical-align: middle;
}
@keyframes hover {
    100% {
    background-color: rgba(255, 255, 255, .3);

    }
}
/* 链接部分 结束 */

/* 倒计时部分 */
#now {
    float: left;
    width: 100%;
    height: .1rem;
    text-align: center;
    font-size: .1rem;
    font-family: 'youyuan';
    color: #fff;
    margin-top: .1rem;
}
#now::before {
    content: '';
}
#now img {
    width: .55rem;
}
/* 倒计时 结束 */